.inner {max-width: 1200px; width: 100%; margin: 0 auto;}



/********** 헤더 **********/
.intro-header {display: flex; align-items: center; justify-content: center; height: 90px; border-bottom: 1px solid var(--gray-f1);} 
.intro-header .logo {display: flex; align-items: center; gap: 10px;} 
.intro-header .logo strong {padding-top: 10px; font-family: "NEXON"; font-weight: 500; font-size: 1.6rem; color: #4b4c4d;} 


/********** 컨텐츠 **********/
.intro-content {}
.intro-content > [class^="con-box"] {padding: 80px 0;}

/* 메인 */
.con-box1 .main {display: flex; justify-content: space-between;}
.con-box1 .lf {flex-shrink: 0; } 
.con-box1 .lf .txt {}
.con-box1 .lf .txt span {display: inline-block; height: 30px; line-height: 30px; padding: 0 10px; font-weight: 500; font-size: 1.5rem; color: var(--main-color); background: var(--main-soft-color);}
.con-box1 .lf .txt h2 {margin: 25px 0 50px; line-height: 6.5rem; font-size: 5rem; color: #002d19;}
.con-box1 .rg {max-width: 640px;}
.con-box1 .rg .cube-list {display: flex; flex-wrap: wrap; gap: 20px;}
.con-box1 .rg .cube-list li {display: flex; align-items: center; justify-content: center; width: 200px; height: 200px; border-radius: 2rem; background: var(--gray-f9);}
.con-box1 .rg .cube-list li:nth-child(2n) {background: #e9f9f3;}
.con-box1 .rg .cube-list li img {}

/* 공지사항 */
.con-box2 {background: var(--gray-f9);}
.con-box2 .notice {display: flex; justify-content: space-between;}
.con-box2 .notice > .lf {padding-right: 100px; background: url(../img/intro/img-notice.png) no-repeat right bottom / auto auto;}
.con-box2 .notice > .lf .flex {flex-direction: column; justify-content: space-between; gap: 30px; height: 100%;}
.con-box2 .notice > .lf .top {position: relative;}
.con-box2 .notice > .lf .bg-txt1 {position: relative; z-index: 1; font-weight: 800; font-size: 10rem; color: #bcded1;}
.con-box2 .notice > .lf .bg-txt2 {position: absolute; top: 50px; left: 65px; font-weight: 800; font-size: 8rem; -webkit-text-stroke: 1px #d7efe6; color: transparent; white-space: nowrap;}
.con-box2 .notice > .lf .bottom  {position: relative; z-index: 1;}
.con-box2 .notice > .lf .sm-txt {font-weight: 500; font-size: 2rem; color: #29302d;}
.con-box2 .notice > .lf .lg-txt {display: block; margin: 5px 0 10px; font-weight: 600; font-size: 2.8rem; color: #333;}
.con-box2 .notice > .lf .lg-txt strong {font-weight: 700; font-size: 4.8rem; color: var(--main-color);}
.con-box2 .notice > .lf em {padding-left: 16px; font-size: 1.5rem; color: #797b80; background: url(../img/intro/icn-info.png) no-repeat left center / auto auto;}
.con-box2 .notice .rg {position: relative; z-index: 1;; width: calc(100% - 505px);}
.bbs-wrap {background: #fff; border-top: 2px solid #555; border-bottom: 1px solid #555;}
.bbs-wrap .bbs-header {display: flex; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--gray-e5);}
.bbs-wrap .bbs-header .lf {display: flex;}
.bbs-wrap .bbs-header .lf strong {font-weight: 600; font-size: 1.8rem; color: #333;}
.bbs-wrap .bbs-header .lf .file-wrap {position: relative;}
.bbs-wrap .bbs-header .lf .file-wrap .file-btn {display: inline-block; font-size: 0; width: 20px; height: 20px; background: url(../img/common/file-ico.png) no-repeat center center / auto 14px;}
.bbs-wrap .bbs-header .lf .file-wrap .file-layer {display: none; position: absolute; top: 30px; left: -10px; z-index: 2; width: 300px; padding: 15px; background: #fff; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25); border-radius: .5rem;}
.bbs-wrap .bbs-header .lf .file-wrap .file-layer::before {content: ''; position: absolute;bottom: 100%; left: 10px; width: 0; height: 0; border: .75rem solid transparent; border-top: none; border-bottom-color: #fff; filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, .1));}
.bbs-wrap .bbs-header .lf .file-wrap .file-layer li {display: flex; justify-content: space-between; align-items: center;}
.bbs-wrap .bbs-header .lf .file-wrap .file-layer li .file-down {max-width: calc(100% - 50px); padding-left: 15px; font-size: 1.4rem; color: #757575; background: url(../img/common/file-ico.png) no-repeat left center / auto 12px;}
.bbs-wrap .bbs-header .lf .file-wrap .file-layer li .file-view {flex-shrink: 0; padding: 5px; font-size: 1.2rem; color: #757575; background: var(--gray-f9); border: 1px solid var(--gray-f1);}
.bbs-wrap .bbs-header .lf .file-wrap .file-layer li + li {margin-top: 5px;}
.bbs-wrap .bbs-header .lf .file-wrap.on .file-layer {display: block;}
.bbs-wrap .bbs-header span {font-size: 1.4rem; color: #757575;}
.bbs-wrap .bbs-con {padding: 20px;}
.bbs-wrap .bbs-con .ovf {max-height: 240px; overflow-y: scroll;}
.bbs-wrap .bbs-con .text {font-family: "Pretendard"; font-size: 1.6rem; line-height: 1.4;}

/* 리스트 */
.con-box3 {}
.con-box3 .obj-list {display: flex; gap: 20px;}
.con-box3 .obj-list li {position: relative; display: flex; flex-direction: column; position: relative; width: calc(33.3% - 15px); padding: 35px 35px 60px 50px; border-radius: 2rem; background: linear-gradient(90deg, #1ea166, #20b06f); overflow: hidden;} 
.con-box3 .obj-list li::after {content:""; position: absolute; top: -30px; left: 170px; width: 300px; height: 400px; background: url(../img/intro/img-objlist01.png) no-repeat center center / auto auto;} 
.con-box3 .obj-list li:nth-child(2) {background: linear-gradient(90deg, #1ea19c, #1aa19c);} 
.con-box3 .obj-list li:nth-child(2):after {top: -80px; left: -200px; width: 400px; height: 300px; background: url(../img/intro/img-objlist02.png) no-repeat center center / auto auto;} 
.con-box3 .obj-list li:nth-child(3) {background: linear-gradient(90deg, #1e7aa1, #3f8fb0);} 
.con-box3 .obj-list li:nth-child(3):after {top: 96px; left: -50px; width: 400px; height: 300px; background: url(../img/intro/img-objlist03.png) no-repeat center center / auto auto;} 
.con-box3 .obj-list li .cate {align-self: end; display: inline-block; height: 25px; line-height: 25px; padding: 0 10px; font-weight: 600; font-size: 1.4rem; color: #1ea166; background: #fff; border-radius: 50px;}
.con-box3 .obj-list li:nth-child(2) .cate {color: #1ea19c;}
.con-box3 .obj-list li:nth-child(3) .cate {color: #1e7aa1;}
.con-box3 .obj-list li strong {margin: 35px 0 25px; line-height: 3.4rem; font-family: "NEXON"; font-size: 2.6rem; color: #fff;}
.con-box3 .obj-list li em {line-height: 2.2; font-size: 1.5rem; color: #fff;}

/* 배너기관 */
.con-box4 {padding: 0 !important; border-top: 1px solid var(--gray-e5);}
.con-box4 .banner {display: flex; align-items: center;}
.con-box4 .banner-slide {width: calc(100% - 125px);}
.con-box4 .banner-slide .swiper-slide {width: 200px; height: 60px;}
.con-box4 .banner-slide .swiper-slide a {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;}
.con-box4 .banner-slide .swiper-slide img {max-height: 200px; max-height: 30px; margin: 0 auto;}
.con-box4 .banner .swiper-control {display: flex; align-items: center; gap: 5px;}
.con-box4 .banner .swiper-control strong {margin-right: 8px; font-size: 1.5rem; white-space: nowrap;}
.con-box4 .banner .swiper-button-prev,
.con-box4 .banner .swiper-button-next {position: relative; top: unset; right: unset; bottom: unset; left: unset; margin: 0; padding: 0; width: 15px; height: 15px; color: #222; background: none;}
.con-box4 .banner .swiper-button-prev::after,
.con-box4 .banner .swiper-button-next::after {font-weight: 600; font-size: 1.4rem;}
.con-box4 .banner .swiper-button-stop {width: 15px; height: 15px; background: url(../img/common/icn-slide1-stop.png) no-repeat center center / auto auto;}
.con-box4 .banner .swiper-button-play {width: 15px; height: 15px; background: url(../img/common/icn-slide1-play.png) no-repeat center center / auto auto;}


/********** 푸터 **********/
.intro-footer {padding: 30px 0; background: #35403b;}
.intro-footer .lf {display: flex; align-items: center; gap: 15px;}
.intro-footer .rg {display: flex; gap: 20px;}
.intro-footer .footer-menu {display: flex; justify-content: end; gap: 10px;}
.intro-footer .footer-menu li {position: relative;}
.intro-footer .footer-menu li a {font-size: 1.4rem; color: #fff;}
.intro-footer .copyright {display: block; margin-top: 5px; font-size: 1.3rem; color: #fff; opacity: .2;}
.intro-footer .family-site {position: relative;}
.intro-footer .family-site .family-btn {display: flex; justify-content: space-between; align-items: center; width: 200px; height: 45px; line-height: 45px; padding: 0 20px; border: 1px solid #6e7974; font-size: 1.4rem; color: #fff;}
.intro-footer .family-site .family-btn .btn-arrow {transform: rotate(90deg); transition: all .3s;}
.intro-footer .family-site .family-btn .btn-arrow::before,
.intro-footer .family-site .family-btn .btn-arrow::after {height: 1px;}
.intro-footer .family-site ul {display: none; position: absolute; bottom: 100%; left: 0; z-index: 1; width: 100%; background: #35403b; border: 1px solid #6e7974;}
.intro-footer .family-site ul li + li {border-top: 1px solid #6e7974;}
.intro-footer .family-site ul li a {display: block; width: 100%; padding: 12px 15px; font-size: 1.5rem; color: #fff; word-break: keep-all;}
.intro-footer .family-site.on .family-btn .btn-arrow {transform: rotate(-90deg);}
.intro-footer .family-site.on ul {display: block;}

@media only screen and (max-width: 1260px) {
    .inner {padding: 0 20px;}
    
    .bbs-wrap .bbs-header .lf .file-wrap .file-layer::before {left: unset; right: 10px;}
    .bbs-wrap .bbs-header .lf .file-wrap .file-layer {left: unset; right: -10px;}
}
@media only screen and (max-width: 1023px) {
    
    /********** 헤더 **********/
    .intro-header {height: 65px;} 
    
    /********** 컨텐츠 **********/
    .intro-content > [class^="con-box"] {padding: 50px 0;}
    
    /* 메인 */
    .con-box1 .lf .txt h2 {line-height: 5rem; font-size: 4rem;}
    .con-box1 .rg {max-width: 470px;}
    .con-box1 .rg .cube-list {gap: 10px;}
    .con-box1 .rg .cube-list li {width: 150px; height: 150px;}
    .con-box1 .rg .cube-list li img {width: 50px; height: 50px;}
    
    /* 공지사항 */
    .con-box2 .notice > .lf {padding-right: 120px; background-size: auto 110px;}
    .con-box2 .notice > .lf .bg-txt1 {font-size: 8rem;}
    .con-box2 .notice > .lf .bg-txt2 {top: 30px; left: 35px;}
    .con-box2 .notice > .lf .sm-txt {font-size: 1.8rem;}
    .con-box2 .notice > .lf .lg-txt {font-size: 2.5rem;}
    .con-box2 .notice > .lf .lg-txt strong {font-size: 3.8rem;}
    .con-box2 .notice .rg {width: calc(100% - 365px);}
    .bbs-wrap .bbs-header {padding: 15px;}
    .bbs-wrap .bbs-header .lf strong {font-size: 1.6rem;}
    .bbs-wrap .bbs-con {padding: 15px;}
    .bbs-wrap .bbs-con .text {font-size: 1.4rem;}
    
    /* 리스트 */
    .con-box3 .obj-list li {padding: 25px 25px 40px 30px;}
    .con-box3 .obj-list li .icn img {width: 20px; height: 20px; object-fit: contain;}
    .con-box3 .obj-list li strong {margin: 25px 0 15px;}
}
@media only screen and (max-width: 767px) {
    /********** 컨텐츠 **********/
    .intro-content > [class^="con-box"] {padding: 30px 0;}
    
    /* 메인 */
    .con-box1 .lf .txt h2 {line-height: 4rem; font-size: 3rem;}
    .con-box1 .rg {max-width: 316px;}
    .con-box1 .rg .cube-list {gap: 8px;}
    .con-box1 .rg .cube-list li {width: 100px; height: 100px; border-radius: 1.5rem;}
    .con-box1 .rg .cube-list li img {width: 30px; height: 30px;}
    
    /* 공지사항 */
    .con-box2 .notice > .lf .bg-txt1 {font-size: 5rem;}
    .con-box2 .notice > .lf .bg-txt2 {font-size: 5rem;}
    .bbs-wrap .bbs-header {position: relative;}
    .bbs-wrap .bbs-header .lf .file-wrap {position: unset;}
    .bbs-wrap .bbs-header .lf .file-wrap .file-layer::before {right: 50%; transform: translateX(-50%);}
    .bbs-wrap .bbs-header .lf .file-wrap .file-layer {top: 50px; left: 0; right: unset; width: 100%;}
    .con-box2 .notice {flex-direction: column; gap: 20px;}
    .con-box2 .notice .rg {width: 100%;}
    
    /* 리스트 */
    .con-box3 .obj-list {gap: 12px;}
    .con-box3 .obj-list li {width: calc(33.3% - 8px); padding: 20px 15px 25px 15px; border-radius: 1.5rem;}
    .con-box3 .obj-list li .cate {height: 22px; line-height: 22px; padding: 0 8px;}
    .con-box3 .obj-list li strong {margin: 20px 0 10px; line-height: 3rem; font-size: 2.2rem;}
        
    /* 푸터 */
    .intro-footer {padding: 20px 0;}
    .intro-footer .inner .flex.flex-sbn.flex-aic {flex-direction: column; gap: 10px;}
    .intro-footer .rg {flex-direction: column; align-items: center; gap: 10px;}
    .intro-footer .footer-menu {justify-content: center;}
}
@media only screen and (max-width: 560px) {
    /* 메인 */
    .con-box1 .main {}
    .con-box1 .lf .txt h2 {margin: 15px 0 20px;}
    .con-box1 .rg {max-width: 226px;}
    .con-box1 .rg .cube-list li {width: 70px; height: 70px;}
    .con-box1 .rg .cube-list li img {width: 25px; height: 25px;}
    
    /* 리스트 */
    .con-box3 .obj-list {flex-direction: column;}
    .con-box3 .obj-list li {width: 100%;}

}
@media only screen and (max-width: 470px) {
    /* 메인 */
    .con-box1 .main {flex-direction: column; gap: 15px;}
    .con-box1 .main .btn-lf {justify-content: end;}
    .con-box1 .rg {max-width: 100%;}
    .con-box1 .rg .cube-list {display: none;}
    
    /* 공지사항 */
    .con-box2 .notice > .lf {background-size: auto 80px;}
}